<template>
	<view>
		<u-form :model="form" ref="uForm" class="content" :class="edit?'':'bd-100'">
			<u-form-item label="房源标题" required prop="title" class='f-24' label-width='150' label-align='center'>
				<u-input type='text' v-model='form.title' @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
			</u-form-item>
			<u-form-item label="上传" required prop="fileNames" required class='f-24' label-width='150' label-align='center'>
				<u-upload v-on:addFileNames="addFileNames" ref='upload'></u-upload>
			</u-form-item>
			<u-form-item label="房源地址" required prop="address" class='f-24' label-width='150' label-align='center'>
				<u-input type='text' v-model='form.address' @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
			</u-form-item>
			<view class="dis-flex">
				<u-form-item label="面积" prop="area" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.area'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
				<u-form-item label="房型" required prop="layout" class='f-24' label-width='150' label-align='center'>
					<u-input type="select" placeholder="请选择房型" @click="is_layoutList = true" :value='form.layout'></u-input>
					<u-select v-model="is_layoutList" mode="single-column" label-name='text' value-name='id' safe-area-inset-bottom
					 :list="layoutList" @confirm="confirm($event,'layout')" :default-value='selectText.layout'></u-select>
				</u-form-item>
			</view>
			<view class="dis-flex">
				<u-form-item label="朝向" prop="orientation" class='f-24' label-width='150' label-align='center'>
					<u-input type="select" placeholder="请选择朝向" @click="is_orientation = true" :value='form.orientation'></u-input>
					<u-select v-model="is_orientation" mode="single-column" label-name='text' value-name='id' safe-area-inset-bottom
					 :list="orientationList" @confirm="confirm($event,'orientation')" :default-value='selectText.orientation'></u-select>
				</u-form-item>
				<u-form-item label="特色" prop="characteristic" class='f-24' label-width='150' label-align='center'>
					<u-input type="select" placeholder="请选择特色" @click="is_characteristic = true" :value='form.characteristic'></u-input>
					<!-- <u-select v-model="is_characteristic" mode="single-column" label-name='text' value-name='id'
					 safe-area-inset-bottom :list="characteristicList" @confirm="confirm($event,'characteristic')" :default-value='selectText.renovation'></u-select> -->
					<multiple-select v-model="is_characteristic" :data="characteristicList" :default-selected="selectText.characteristic"
					 label-name='text' value-name='id' @confirm="confirm($event,'characteristic',true)"></multiple-select>
				</u-form-item>
			</view>
			<view class="dis-flex">
			<u-form-item label="押金" class='f-24' label-width='150' label-align='center'>
				<u-input type="select" placeholder="请选择交付方式" @click="is_deposit = true" :value='form.deposit'></u-input>
				<u-select v-model="is_deposit" mode="single-column" label-name='text' value-name='id' safe-area-inset-bottom :list="depositList"
				 @confirm="confirm($event,'deposit')" :default-value='selectText.deposit'></u-select>
			</u-form-item>
			<u-form-item label="房间号"  prop="housingCode" class='f-24' label-width='150' label-align='center'>
				<u-input type='number' v-model='form.housingCode'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
			</u-form-item>
			</view>
			<view class="dis-flex">
				<u-form-item label="租金" required prop="price" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.price'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
				<u-form-item label="管理费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.manageFee'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
			</view>
			<view class="dis-flex">
				<u-form-item label="水费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.waterRate'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
				<u-form-item label="电费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.powerRate'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
			</view>
			<view class="dis-flex">
				<u-form-item label="网费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.networkCharges'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
				<u-form-item label="卫生费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.sanitationFee'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
			</view>
			<view class="dis-flex">
				<u-form-item label="公摊费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.sharingFee'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
				<u-form-item label="其他杂费" class='f-24' label-width='150' label-align='center'>
					<u-input type='number' v-model='form.otherFee'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
				</u-form-item>
			</view>
			<u-form-item label="配套设施" prop="facilitiesIds" class='f-24' label-width='150' label-align='center'>
				<view class="facilities dis-flex flex-wrap">
					<view class="supporting f-22" :class="item.check?'active':''" v-for="(item,index) in supportingFacilitiesList"
					 :key='this' @click="choiceSupporting(index)">
						{{item.facilitiesName}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="装修程度" prop="renovation" class='f-24' label-width='150' label-align='center'>
				<u-input type="select" placeholder="请选择装修程度" @click="is_decorationDegree = true" :value='form.renovation'></u-input>
				<u-select v-model="is_decorationDegree" mode="single-column" label-name='text' value-name='id'
				 safe-area-inset-bottom :list="decorationDegreeList" @confirm="confirm($event,'renovation')" :default-value='selectText.renovation'></u-select>

			</u-form-item>
			<u-form-item label="入住时间" prop="checkInTime" class='f-24' label-width='150' label-align='center'>
				<!-- <u-input type='text' /> -->
				<u-input type="select" placeholder="不选则默认随时入住" @click="timeShow = true" :value='form.checkInTime'></u-input>
				<u-picker mode="time" v-model="timeShow" @confirm="confirmTime" :default-time='form.checkInTime'></u-picker>
			</u-form-item>
			<view class="landlady f-38 f-w-7">房东信息</view>
			<u-form-item label="姓名：" required prop="masterName" :label-style='labelStyle' class='f-24' label-width='150'
			 label-align='center'>
				<u-input type='text' v-model='form.masterName'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
			</u-form-item>
			<u-form-item label="联系方式：" required prop="masterPhone" :label-style='labelStyle' class='f-24' label-width='150'
			 label-align='center'>
				<u-input type='text' v-model='form.masterPhone' @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" />
			</u-form-item>
			<u-form-item label="备注：" prop="" :label-style='labelStyle' class='f-24' label-width='150' label-align='center'>
				<u-input type='textarea' auto-height height="150rpx" v-model='form.remark'  @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar"/>
			</u-form-item>
			<view class="dis-flex flex-x-center flex-y-center save">
				<u-button size='medium' class='submit' @click='save' type="success">发布</u-button>
			</view>
		</u-form>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import upload from "@/components/upload.vue";
	import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect";
	export default {
		components: {
			'u-upload': upload,
			multipleSelect
		},
		props: {
			edit: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			housId: {
				type: String,
				default: function() {
					return ''
				}
			},
		},
		data() {
			return {
				form: {
					"layout": "", //房型
					"characteristic": '', //房源特色
					"title": "", //标题
					"area": "", //面积
					"orientation": "", //朝向
					"price": "", //租金
					"address": "", //房源地址
					"renovation": "", //装修程度
					"checkInTime": "", //可入住时间
					"masterName": "", //房主姓名
					"masterPhone": "", //房主电话
					"remark": "", //备注
					'facilitiesIds': [], //配套设施
					'deposit': "", //押金交付
					manageFee: "", //管理费
					waterRate: '', //水费
					powerRate: "", //电费
					networkCharges: "", //网费
					sanitationFee: "", //卫生费
					sharingFee: '', //公摊费
					otherFee: "", //其他杂费
					housingCode:''
				},
				selectText: [],
				timeShow: false,
				labelStyle: {
					fontWeight: 700,
					fonSize: '32rpx'
				},
				// id代表位置
				layoutList: [{
						id: "0",
						text: "单间"
					},
					{
						id: "1",
						text: "一房一厅"
					},
					{
						id: "2",
						text: "两房一厅"
					},
					{
						id: "3",
						text: "三房一厅"
					},
					{
						id: "4",
						text: "loft复式"
					}
				], // 房型
				is_layoutList: false,
				is_deposit: false,
				// 朝向
				orientationList: [{
						id: "0",
						text: '东南',
					},
					{
						id: "1",
						text: '东北',
					},
					{
						id: "2",
						text: '西南',
					},
					{
						id: "3",
						text: '西北',
					},
					{
						id: "3",
						text: '东',
					},
					{
						id: "3",
						text: '南',
					},
					{
						id: "3",
						text: '西',
					},
					{
						id: "3",
						text: '北',
					},
				],
				is_orientation: false,
				// 特色
				characteristicList: [{
						id: "0",
						text: "电梯房"
					},
					{
						id: "1",
						text: "近地铁"
					},
					{
						id: "2",
						text: "可短租"
					},
					{
						id: "3",
						text: "带阳台"
					},
					{
						id: "4",
						text: "采光好"
					},
					{
						id: "5",
						text: "独立厨房"
					},
				],
				is_characteristic: false,
				// 装修程度
				decorationDegreeList: [{
						id: "0",
						text: "毛坯"
					},
					{
						id: "1",
						text: "简装"
					},
					{
						id: "2",
						text: "精装"
					},
					{
						id: "3",
						text: "豪华装修"
					},
				],
				depositList: [{
						id: "0",
						text: "无押金"
					},
					{
						id: "1",
						text: "押一付一"
					},
					{
						id: "2",
						text: "押二付一"
					},
					{
						id: "3",
						text: "押三付一"
					}
				],
				is_decorationDegree: false,
				// 配套设施
				supportingFacilitiesList: [],
				rules: {
					title: [{
						required: true,
						max: 20,
						message: '20字以内',
						trigger: ['blur']
					}],
					address: [{
						required: true,
						max: 50,
						message: '50字以内',
						trigger: ['blur']
					}],
					layout: [{
						required: true,
						message: '请选择房型',
						trigger: ['blur']
					}],
					price: [{
						required: true,
						validator: (rule, value, callback) => {
							return value > 0;
						},
						message: '请输入租金',
						trigger: ['blur']
					}],
					masterName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur']
					}],
					masterPhone: [{
						required: true, // 自定义验证
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur']
					}],
				},
				fileNames: [],
			}
		},
		created() {
			this.getFacilities();
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获取所有房源设施
			getFacilities() {
				this.$u.api.getAllFacilities().then(res => {
					res.data.forEach(ele => {
						ele.check = false;
					})
					this.supportingFacilitiesList = res.data;
					if (this.housId) {
						this.getHousDetail();
					}
				})
			},
			 showTabbar(){
					this.$emit('swtichTabbar', true)
			    },
			    hideTabbar(){
					this.$emit('swtichTabbar', false)
			    },
			// 获取房源详情
			getHousDetail() {
				this.$u.api.getHousDetail(this.housId).then(res => {
					// let img = [],
					// video = '';
					var housData = JSON.parse(JSON.stringify(res.data));
					// 封装显示的数据
					housData.characteristic = res.data.characteristic ? res.data.characteristic.split(",") : [];
					housData.facilitiesIds = res.data.facilitiesIds ? res.data.facilitiesIds.split(",") : [];
					this.showData(res.data, housData, 'characteristic', 'characteristicList', true);
					this.showData(res.data, housData, 'renovation', 'decorationDegreeList', false);
					this.showData(res.data, housData, 'layout', 'layoutList', false);
					this.showData(res.data, housData, 'deposit', 'depositList', false);
					this.showData(res.data, housData, 'orientation', 'orientationList', false);
					let time = res.data.checkInTime ? res.data.checkInTime.split("T") : '';
					this.form.checkInTime = time ? time[0] : '随时入住';
					this.form.title = res.data.title;
					this.form.area = res.data.area;
					this.form.price = res.data.price;
					this.form.address = res.data.address;
					this.form.masterName = res.data.masterName;
					this.form.masterPhone = res.data.masterPhone;
					this.form.facilitiesIds = housData.facilitiesIds;
					this.form.housingId = housData.housingId;
					this.form.manageFee = housData.manageFee;
					this.form.waterRate = housData.waterRate;
					this.form.powerRate = housData.powerRate;
					this.form.networkCharges = housData.networkCharges;
					this.form.sanitationFee = housData.sanitationFee;
					this.form.sharingFee = housData.sharingFee;
					this.form.otherFee = housData.otherFee;
					this.form.housingCode = housData.housingCode;
					if (housData.housingFacilities) {
						housData.housingFacilities.forEach(ele => {
							this.supportingFacilitiesList.forEach(element => {
								if (ele) {
									if (ele.facilitiesName == element.facilitiesName) {
										element.check = true;
									}
								}

							})
						})
					}
					this.$refs.upload.init(housData.files ? housData.files : '');
				})
			},
			// 编辑时显示的数据
			showData(data, val, name, dataName, multiple) {
				this.form[name] = data[name] || '';
				let index = []
				if (multiple) {
					val[name].forEach(element => {

						this[dataName].forEach(ele => {

							if (element == ele.text) {
								index.push(parseInt(ele.id));
							}
						})
					})
				} else {

					this[dataName].forEach(ele => {
						if (val[name] == ele.text) {
							index.push(parseInt(ele.id));
						}
					})
				}
				this.selectText[name] = index;
			},
			// 选择房源设施
			choiceSupporting(index) {
				this.supportingFacilitiesList[index].check = !this.supportingFacilitiesList[index].check;
				if (this.supportingFacilitiesList[index].check) {
					this.form.facilitiesIds.push(this.supportingFacilitiesList[index].facilitiesId)
				} else {
					let i = this.form.facilitiesIds.findIndex(fruit => fruit == this.supportingFacilitiesList[index].facilitiesId) // 0
					if (i != -1) {
						this.form.facilitiesIds.splice(i, 1);
					}
				}
			},
			addFileNames(val) {
				this.fileNames = val;
			},
			confirm(e, val, falg) {
				let defaultValue = [];
				if (falg) {
					this.form[val] = e.map((el) => el.text).join(",");
					var index = e.map((el) => el.id);
				} else {
					this.form[val] = e[0] ? e[0].label : '';
					let index = parseInt(e[0].value);
					defaultValue.push(index)

				}
				this.selectText[val] = defaultValue;
			},
			confirmTime(e) {
				this.form.checkInTime = `${e.year}-${e.month}-${e.day}`
			},
			// 初始化
			initData() {
				this.form = {
					facilitiesIds: []
				};
				this.fileNames = [];
				this.$refs.upload.init();
				this.getFacilities();
			},
			save() {
				// uni.redirectTo
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.fileNames > 10) {
							this.$refs.uToast.show({
								title: "最多9张图",
								type: 'error',
							})
						} else if (this.fileNames == 0) {
							this.$refs.uToast.show({
								title: "请选择图片或视频",
								type: 'error',
							})
						}
						if (this.form.layout == '') {
							this.$refs.uToast.show({
								title: "请选择房型",
								type: 'error',
							})
						}

						let param = {};
						var copyForm = JSON.parse(JSON.stringify(this.form));
						this.form.userReleaseId = localStorage.getItem('userId');
						param.housingInfo = this.form;
						param.housingInfo.facilitiesIds = copyForm.facilitiesIds.join(",");
						param.fileIds = this.fileNames;
						if (copyForm.checkInTime == '随时入住') {
							param.housingInfo.checkInTime = ''
						}
						this.$u.api.addHousingInfo(param).then(res => {
							this.$refs.uToast.show({
								title: "操作成功",
								type: 'success',
							})
							if (this.form.housingId) {
								uni.navigateBack();
							} else {
								this.initData();
							}
						}).catch(res => {
							this.form.facilitiesIds = copyForm.facilitiesIds;
						})
					}
				})
			},

		},

	}
</script>
<style scoped>
	.content {
		padding: 0 24rpx;

	}

	.bd-100 {
		padding-bottom: 80rpx;
	}

	.landlady {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;

	}

	.supporting {
		background: #f2f2f2;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 10rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.active {
		background: #ee5e23;
		color: #ffffff;
	}

	.submit {
		margin-bottom: 150rpx;
	}

	.save {
		margin: 20rpx 0;
	}
</style>
